<script lang="ts" setup>
import MyBox from '@/components/MyBox.vue'
import * as echarts from 'echarts'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

watch(
  () => props.data,
  (val) => {
    const { xList, actualList, targetList, legendList } = val
    options.value.legend.data = legendList
    options.value.xAxis.data = xList
    options.value.series[0].data = targetList
    options.value.series[0].name = legendList[0]
    //取数组最大值，小于10取10
    // const maxValue = Math.max(...yList)
    // options.value.yAxis.max = maxValue > 10 ? maxValue : 10
  }
)

const options = ref({
  grid: {
    right: 30,
    top: 40,
    bottom: 30
  },
  legend: {
    show: false,
    textStyle: {
      color: '#ebeef5',
      fontSize: 16
    },
    data: []
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    boundaryLink: true, // 设置 tooltip 不超出容器边界
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#ebeef5',
      fontSize: 22
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    },
    data: ['首卷', '预警', 'Total']
  },
  yAxis: {
    show: false,
    type: 'value',
    name: '',
    nameTextStyle: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right',
      padding: [0, 12, 8, 0]
    },
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      data: [1195, 2195, 3195],
      name: '',
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        color: '#fff',
        fontSize: 24
      },
      barWidth: 50,
      // color: '#91cc75',
      // 设置渐变色
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 渐变方向从上到下
          [
            { offset: 0, color: '#27D9FF' }, // 上部颜色
            { offset: 0.5, color: '#188df0' }, // 中间颜色
            { offset: 1, color: '#1A84FE' } // 下部颜色
          ]
        ),
        // 设置阴影的模糊大小、水平偏移、垂直偏移、颜色
        shadowBlur: 10,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        shadowColor: 'rgba(0, 0, 0, 0.2)'
        //圆角
        // borderRadius: [30, 90, 30, 30]
      }
    }
  ]
})
</script>
<template>
  <MyBox class="bad-count" title="当天完成卷数">
    <template v-slot:main>
      <MyChart height="260px" :option="options" />
    </template>
  </MyBox>
</template>
<style scoped lang="less">
.bad-count {
  width: 20%;
}

</style>
